@import "variable.less";

/*@media screen and (-webkit-min-device-pixel-ratio: 0) {*/
.checkbox,
.radio {
    label {
        padding-left: 0;
    }
}

label {
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    [type="radio"],
    [type="checkbox"] {
        display: none;
        margin: 0;
        & + ins {
            position: relative;
            text-indent: 20px;
            display: inline-block;
            line-height: 16px;
            min-width: 16px;
            min-height: 16px;
            &:before {
                content: '';
                width: 16px;
                height: 16px;
                border: #999 solid 1px;
                border-radius: @border-radius;
                display: block;
                position: absolute;
                left: 0;
                background: #fff;
            }
        }
        &:checked {
            & + ins {
                &:before {
                    border-color: @color-primary;
                }
                &:after {
                    content: '';
                    position: absolute;
                    display: block;
                }
            }
            &:disabled {
                & + ins {
                    cursor: not-allowed;
                    &:before {
                        border-color: lighten(#999, 25%);
                    }
                }
            }
        }
        &:disabled {
            & + ins {
                cursor: not-allowed;
                color: #999;
                &:before {
                    border-color: lighten(#999, 25%);
                }
            }
        }
    }
    [type="checkbox"] {
        &:checked {
            & + ins {
                &:before {
                    background: @color-primary;
                }
                &:after {
                    width: 10px;
                    height: 6px;
                    border-left: #fff solid 2px;
                    border-bottom: #fff solid 2px;
                    transform: rotate(-45deg);
                    top: 4px;
                    left: 3px;
                }
            }
            &:disabled {
                & + ins {
                    &:before {
                        background: lighten(#999, 25%);
                    }
                    &:after {
                        border-left-color: #999;
                        border-bottom-color: #999;
                    }
                }
            }
        }
    }
    [type="radio"] {
        & + ins {
            &:before {
                border-radius: 100%;
            }
        }
        &:checked {
            & + ins {
                &:after {
                    width: 8px;
                    height: 8px;
                    top: 4px;
                    left: 4px;
                    background: @color-primary;
                    border-radius: 100%;
                }
            }
            &:disabled {
                & + ins {
                    &:after {
                        background: lighten(#999, 25%);
                    }
                }
            }
        }
    }
}

/*
}*/
